<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid panel</title>

    <!--引入样式文件-->
    <link rel="stylesheet"
          href="../extjs/build/classic/theme-classic/resources/theme-classic-all.css">

    <link rel="stylesheet" type="text/css" href="resources/css/font-awesome.min.css">

    <!--引入js文件-->
    <script src="../extjs/ext-bootstrap.js"></script>
    <style>
        .add{
            background-image: url("images/btn-add.png") !important;
        }
        .del{
            background-image: url("images/btn-del.png") !important;
        }
        .logo{
            background-image: url("images/01.png") !important;
        }
    </style>
    <script>

        Ext.onReady(function () {

          var panel=Ext.create('Ext.panel.Panel',{
              width:400,
              height:200,
              title:'Card布局示例',
              renderTo:Ext.getBody(),
              layout:'card',
              activeItem:0,
              items:[{
                  id: 'card-0',
                  html: 'Step 1'
              },{
                  id: 'card-1',
                  html: 'Step 2'
              },{
                  id: 'card-2',
                  html: 'Step 3'
              }],
              bbar:['->',{
                  id: 'prev',
                  text:'&laquo; 上一步',
                  handler:function () {
                      navigate('prev');
                  }
              },{
                  id: 'next',
                  text:'&raquo; 下一步',
                  handler:function () {
                      navigate('next');
                  }
              }]
          });

            function navigate(direction) {
                var layout = panel.getLayout();
                if(!(direction === 'prev' && layout.layoutCount === 1)) {
                    layout[direction]();
                    Ext.getCmp('prev').setDisabled(!layout.getPrev());
                    Ext.getCmp('next').setDisabled(!layout.getNext());
                }
            };

        });
    </script>

</head>
<body style="padding: 10px">



</body>
</html>